<template>
  <div id="index">
    <el-date-picker
      v-model="time"
      type="month"
      value-format="yyyy-MM"
      placeholder="选择月份"
      @change="change"
    />
    <el-table
      :data="
        tableData.filter(
          (data) =>
            !search ||
            data.user.username.toLowerCase().includes(search.toLowerCase())
        )
      "
      style="width: 100%"
    >
      <el-table-column label="住址">
        <template slot-scope="scope">
          <span>{{ scope.row.house.building + scope.row.house.room }}</span>
        </template>
      </el-table-column>

      <el-table-column label="业主">
        <template slot-scope="scope">
          <span>{{ scope.row.user.username }}</span>
        </template>
      </el-table-column>

      <el-table-column label="费用" prop="money" />
      <el-table-column label="月份" prop="time" />
      <el-table-column a label="缴费状态">
        <template slot-scope="scope">
          <span :class="scope.row.state.toString()">
            {{
              scope.row.state ? "已缴费" : "未缴费"
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="right">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" :data-index="scope.$index" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">Edit</el-button>
          <el-button
            size="mini"
            type="primary"
            @click="handleDelete(scope.$index, scope.row)"
          >Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      style="margin-top: 30px"
      background
      :page-size="10"
      layout="prev, pager, next"
      :total="total"
      @current-change="pageChange"
    />
    <!-- 图表—————————————————————————————————————————— -->
    <!-- <Chart></Chart> -->
  </div>
</template>

<script>
import billsApi from '../../api/bills'

// import Chart from '../../components/bills_Chart/index.vue'

export default {
  components: {
    // Chart
  },
  data() {
    return {
      tableData: [],
      search: '',
      time: '',
      total: 0
    }
  },
  methods: {
    // 修改缴费状态
    async handleEdit(row) {
      let { state } = row
      const { _id } = row
      state = !state // 修改状态取反
      const data = await billsApi.changeState({ state, _id })
      if (data) {
        this.$message({
          message: '缴费成功',
          type: 'success'
        })
        const obj = {}
        obj.page = 1 // 当前页
        obj.limit = 10 // 每页显示条数
        obj.time = this.time
        this.tableData = await billsApi.getAll(obj)
      }
    },
    handleDelete(index, row) {
      console.log(index, row)
    },
    async change() {
      const obj = {}
      obj.page = 1 // 当前页
      obj.limit = 10 // 每页显示条数
      obj.time = this.time
      const data = await billsApi.getAll(obj)
      if (data) {
        console.log(data[0].total)
        this.total = data[0].total
        this.tableData = data
      } else {
        this.$message.error('未开通本月缴费')
        this.tableData = []
      }
    },
    async pageChange(val) {
      console.log(val)
      const obj = {}
      obj.page = val // 当前页
      obj.limit = 10 // 每页显示条数
      obj.time = this.time
      const data = await billsApi.getAll(obj)
      this.tableData = data
    }
  }
}
</script>

<style lang="scss" scoped>
#index {
  width: 90%;
  margin: auto;
  margin-top: 30px;
  margin-bottom: 100px;
}
.false {
  color: red;
}
.true {
  color: green;
}
</style>
